@import 'scss-imports/cssvars';

:host {
  color: var(--fg2);
  display: block;
  height: 100%;
  overflow: auto;
  position: relative;
  width: 240px;

  @media (max-width: $breakpoint-md) {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow: auto;
    width: 100%;

    ix-enclosure-side {
      max-width: 200px;
      width: 40vw;
    }
  }
}

.enclosure {
  align-items: flex-end;
  background-color: var(--bg2);
  border: 1px solid var(--lines);
  border-bottom-width: 0;
  border-left: solid 4px transparent;
  cursor: pointer;
  display: grid;
  padding: 12px 0 16px;
  text-align: center;

  &:hover {
    background-color: var(--alt-bg1);
  }

  &:last-child {
    border-bottom-width: 1px;
  }

  &.active {
    border-left: solid 4px var(--primary);
  }

  .enclosure-image {
    margin: 10px 16px;
    max-height: 85px;
  }
}
